import React, { useRef, useState } from 'react';
import { Space, Tag, Input, Select, Cascader } from 'antd';

const TagList: React.FC<{
    value?: {
        key: string;
        label: string;
    }[];
    onChange?: (
        value: {
            key: string;
            label: string;
        }[],
    ) => void;
}> = ({ value, onChange }) => {

    interface Option {
        value: string | number;
        label: string;
        children?: Option[];
        disableCheckbox?: boolean;
    }

    const options: Option[] = [
        {
            label: '周一',
            value: 'Monday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周二',
            value: 'Tuesday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周三',
            value: 'Wednesday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周四',
            value: 'Thursday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周五',
            value: 'Friday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周六',
            value: 'Saturday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
        {
            label: '周日',
            value: 'Sunday',
            children: [
                { label: '1-2', value: '1-2' },
                { label: '3-4', value: '3-4' },
                { label: '5-6', value: '5-6' },
                { label: '7-8', value: '7-8' },
                { label: '9-10', value: '9-10' },
            ],
        },
    ];

    const ref = useRef<Input | null>(null);
    const [newTags, setNewTags] = useState<
        {
            key: string;
            label: string;
        }[]
    >([]);
    const [inputValue, setInputValue] = useState<string>('');

    const handleSelectChange = (value) => {
        console.log("e", value)
        setInputValue(value);
    };

    const handleInputConfirm = () => {
        let tempsTags = [...(value || [])];
        if (
            inputValue &&
            tempsTags.filter((tag) => tag.label === inputValue).length === 0
        ) {
            tempsTags = [
                ...tempsTags,
                { key: `new-${tempsTags.length}`, label: inputValue },
            ];
        }
        onChange?.(tempsTags);
        setNewTags([]);
        setInputValue('');
    };

    // 同时显示 两级菜单
    const displayRender = (labels: Array<string>) => labels.join('/');


    return (
        <Space>
            {(value || []).concat(newTags).map((item) => (
                <Tag key={item.key}>{item.label}</Tag>
            ))}
            <Cascader
                options={options}
                // onChange={onChange}
                multiple
                displayRender={displayRender}
                maxTagTextLength={10}
                maxTagCount={4}
                defaultValue={[['Monday', '1-2'], ['Monday', '3-4']]}
                style={{ minWidth: '55%' }}
                // disabled
            />
        </Space>
    );
};

export default TagList;